<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>风味-收货地址</title>
		<link rel="stylesheet" type="text/css" href="css/personCenterPublic.css"/>
		<script src="js/jquery-2.1.0.js"></script>
		<style type="text/css">
			#addAddress{position: fixed;bottom: 0;background: #FFCC33;border: none;width: 100%;height: 50px;letter-spacing: 5px;
				font-size: 16px; color: white;}
			#addAddressCon{width: 100%;position: relative;}
			.newdiv,.addressCon{width: 100%;background: white;margin-top: 10px;color: gray;}
			.newdiv{height: 150px;}
			.addressCon{position: relative;text-align: left;padding-bottom: 10px;}
			#inputPro,#inputCity,#inputCounty,#inputSchool,#inputDorm{width: 100px;height: 20px; border: none;
				border-bottom: 1px solid #FFCC33;margin-top: 20px;}
			.newp{display: inline-block;}
			input:focus{outline: none;}
			#save,#cancel{width: 50px;border: none;background: none;color: #ffcc33;position: relative;top: 49px;letter-spacing: 5px;
				font-size: 14px;left: -50px;}
			#cancel{left: 303px;top: 27px;}
			.addressCon p{width: 90%; line-height: 40px;margin-left: 20px; word-break: break-all;}
			#addressConIn{text-align: right;padding-right: 30px;}
			#addressConIn input{border: none;background: none;color: #ffcc33;letter-spacing: 5px;margin-left: 30px;}
		</style>
		
	</head>
	<body>
		<div id="back">
			<a href="#" onClick="javascript :history.back(-1);" style="height: 50px;display:block;"><&nbsp;返回个人资料</a>
		</div>

		<!--有数据时的样式-->
		<!--<div class="addressCon">-->
			<!--<p>四川省成都市龙泉驿区四川旅游学院清雅居b6666</p>-->
			<!--<input type="button" name="edit" id="edit" value="编辑"/>&lt;!&ndash;编辑按钮，点击给他修改地址的权限&ndash;&gt;-->
			<!--<input type="button" name="delete" id="delete" value="删除"/>&lt;!&ndash;删除按钮，点击给他删除地址的权限&ndash;&gt;-->
		<!--</div>-->

		<!-- hbl--添加一个div来放置从数据库拿出来的，否则添加按钮后会在从数据库拿出来的数据之前-->
		<!-- 需要调整行距：数据超过长度后页面乱---向下滑动没实现-->
		<div id = "sqlInfor">

		</div>

		<div id="addAddressCon">

		</div>

		<input type="button" name="addAddress" id="addAddress" value="添加收货地址"/>
		<!-- 可以将两个人js放到两个js文件中，调用顺序没差-->
		<script>
			function getUrl(){
				var str = location.href;//获取传过来的地址
				var arr = str.split("?");
				var str1 = arr[1];//获取？之后的内容
				userId = str1.split("=")[1];
				return userId;
			}


			//将所有信息加载到页面
			$.ajax("/fengwei/address/selectByUserId",{
				type:"get",
				data:{
					'userId':getUrl,
				},
				async:false,
				success:function(data){
//							成功后清除刚刚添加时的所有样式，并用<p>将刚刚的放到页面
					var dataObj = eval('('+data+')');
					for(var i = 0;i<dataObj.length;i++){
						var addressId = dataObj[i].adressId;
						var goodsAdress = dataObj[i].goodsAdress;
						var newDiv = document.createElement('div');//创建一个新的div
						var infor = document.getElementById('sqlInfor')
						newDiv.setAttribute('class', 'addressCon');//给新的div设置class，class的样式在style里设置
						newDiv.setAttribute('id', addressId);//方便删除后移除
						infor.appendChild(newDiv);
//							id = "delete" 会出现很多个，所以改成class ,edit同理
						newDiv.innerHTML = "<p _adressId = '"+addressId+"'> "+goodsAdress+"</p>" +
								"<div id='addressConIn'>" +
								"<input _adressId = '"+addressId+"' type='button' name='edit' class='edit' value='编辑'/>" +
								" <input _adressId = '"+addressId+"' type='button' name='delete' class='delete' value='删除'/>" +
								"</div>";
					}

				},
				error:function(){
					alert(0);
				},
			})
			//实现删除功能

			$(window).load(function(){
				deleteFun()
				UpdateFun();
				function deleteFun(){
					var deleteById = $("input[name = 'delete']");
					var addressIdDiv = $(".addressId")

					deleteById.click(function () {
						var addressId = $(this).attr("_adressId");

						$.ajax("/fengwei/address/deleteByAddressId",{
							type:"post",
							data:{
								'addressId':addressId
							},
							success:function(){
								addressIdDiv.innerHTML = "";
								window.location.reload();//刷新当前页面.
								deleteFun()
							},
							error:function(){
							}
						})
					})
				}

				function UpdateFun(){
					var UpdateById = $("input[name = 'edit']")
					UpdateById.click(function(){
						var addressId = $(this).attr("_adressId");
						$.ajax("/fengwei/address/selectByKey",{
							type:"get",
							data:{
								'addressId':addressId
							},
							success:function(data){
								var dataObj = eval('('+data+')')
								var goodsAdress = dataObj.goodsAdress;
								var provenceGet = goodsAdress.substring(0,goodsAdress.indexOf("省"));
								var cityGet = goodsAdress.substring(goodsAdress.indexOf("省")+1,goodsAdress.indexOf("市"))
								var countryGet = goodsAdress.substring(goodsAdress.indexOf("市")+1,goodsAdress.indexOf("区"))
								var schoolGet = goodsAdress.substring(goodsAdress.indexOf("县")+1,goodsAdress.indexOf("学"))
								var dormitoryGet = goodsAdress.substring(goodsAdress.indexOf("校")+1,goodsAdress.indexOf("寝"))
								console.log(provenceGet+cityGet+countryGet+schoolGet+dormitoryGet)
//					得到该id的所有信息后调用下面的函数，用来改变样式，原来的class为addressCon，要设置id为addAddressCon，然后添加newDiv
								updateDiv(provenceGet,cityGet,countryGet,schoolGet,dormitoryGet,addressId);
							},
							error:function(){
								alert(0)
							}
						})

						function updateDiv(provenceGet,cityGet,countryGet,schoolGet,dormitoryGet){
							var thisDiv = document.getElementById(addressId);
							thisDiv.innerHTML = "";
							thisDiv.removeAttribute("class","addressCon")
							thisDiv.setAttribute("id","addressCon")
//两次往页面加入编辑部分是不同的，这次修改编辑的有value的属性，而，开始添加地址的时候是没有value属性的
//				var addAddressCon = document.getElementById('addAddressCon');
							var div = document.createElement('div');//创建一个新的div
							div.setAttribute('class', 'newdiv');//给新的div设置class，class的样式在style里设置
							var object = thisDiv.appendChild(div);//将这个新的div添加到页面里


							var inputPro = document.createElement('input');//创建输入省的input
							inputPro.id = 'inputPro';
							//				inputPro.value='如四川';
							var addPro = div.appendChild(inputPro);
//				将变量放到value里面，给用户改
							inputPro.setAttribute("value",provenceGet)

							var province = document.createElement('p');
							province.setAttribute('class', 'newp');
							province.innerHTML = '省';
							var addProP = div.appendChild(province);

							var inputCity = document.createElement('input');//创建输入市的input
							inputCity.id = 'inputCity';
							//				inputCity.value='如成都';
							var addCity = div.appendChild(inputCity);
							inputCity.setAttribute("value",cityGet)

							var city = document.createElement('p');
							city.setAttribute('class', 'newp');
							city.innerHTML = '市';
							var addCityP = div.appendChild(city);

							var inputCounty = document.createElement('input');//创建输入区县的input
							inputCounty.id = 'inputCounty';
							//				inputCounty.value='如龙泉驿';
							var addCity = div.appendChild(inputCounty);
							inputCounty.setAttribute("value",countryGet)

							var county = document.createElement('p');
							county.setAttribute('class', 'newp');
							county.innerHTML = '区县';
							var addCountyP = div.appendChild(county);

							var inputSchool = document.createElement('input');//创建输入学校的input
							inputSchool.id = 'inputSchool';
							//				inputSchool.value='如四川旅游学院';
							var addSchool = div.appendChild(inputSchool);
							inputSchool.setAttribute("value",schoolGet)


							var school = document.createElement('p');
							school.setAttribute('class', 'newp');
							school.innerHTML = '学校';
							var addSchoolP = div.appendChild(school);

							var inputDorm = document.createElement('input');//创建输入寝室的input
							inputDorm.id = 'inputDorm';
							//				inputDorm.value='如清雅居b栋b190';
							var addSchool = div.appendChild(inputDorm);
							inputDorm.setAttribute("value",dormitoryGet)

							var dormitory = document.createElement('p');
							dormitory.setAttribute('class', 'newp');
							dormitory.innerHTML = '寝室号';
							var addDormP = div.appendChild(dormitory);


							var save = document.createElement('input');//创建保存信息的button
							save.id = 'save';
							save.type = 'button';
							save.value = '保存';
							var saveInfo = div.appendChild(save);

							var cancel = document.createElement('input');//创建取消保存信息的button
							cancel.id = 'cancel';
							cancel.type = 'button';
							cancel.value = '取消';
							var cancelInfo = div.appendChild(cancel);

							var cancelButton = document.getElementById('cancel');
							var saveButton = document.getElementById('save');


//				当按下取消按钮后，不修改，恢复原样
							cancelButton.onclick = function(){
								thisDiv.innerHTML = "<p _adressId = '"+addressId+"'> "+provenceGet+"省"+cityGet+"市"+countryGet+"区县"+schoolGet+"学校"+dormitoryGet+"寝室号"+"</p>" +
										"<div id='addressConIn'>" +
										"<input _adressId = '"+addressId+"' type='button' name='edit' class='edit' value='编辑'/>" +
										" <input _adressId = '"+addressId+"' type='button' name='delete' class='delete' value='删除'/>" +
										"</div>";
								thisDiv.setAttribute("class","addressCon");
								thisDiv.removeAttribute("id");
								thisDiv.setAttribute('id', addressId);
//					回调，不然编辑按钮不能执行第二次
								UpdateFun();
							}

//				当按下保存按钮后，将修改后的内容放到后台
							saveButton.onclick = function(){
								var inputPro = document.getElementById('inputPro');
								var inputCity = document.getElementById('inputCity');
								var inputCounty = document.getElementById('inputCounty');
								var inputSchool = document.getElementById('inputSchool');
								var inputDorm = document.getElementById('inputDorm');
								var inputProVal = inputPro.value;
								var inputCityVal = inputCity.value;
								var inputCountyVal = inputCounty.value;
								var inputSchoolVal = inputSchool.value;
								var inputDormVal = inputDorm.value;

								var updateAddress = inputProVal+"省"+inputCityVal+"市"+inputCountyVal+"区县"+inputSchoolVal+"学校"+inputDormVal+"寝室号";
//								ajax的放到js方法里面不能执行，因此用函数到外面调用
								updateAjax(updateAddress);
							}

						}
						function updateAjax(updateAddress){
							$.ajax("/fengwei/address/updateGoodsAddress",{
								type:"post",
								data:{
									'adressId':addressId,
									'userId':getUrl,
									'goodsAdress':updateAddress
								},
								success:function(){
									window.location.reload();//刷新当前页面.
								},
								error:function(){
//						修改失败
									alert(0)
								}
							})
						}
					})
				}

			})

		</script>

		<script type="text/javascript">
				var addAddress = document.getElementById('addAddress');
				addAddress.onclick = function () {
					var addAddressCon = document.getElementById('addAddressCon');
					var div = document.createElement('div');//创建一个新的div
					div.setAttribute('class', 'newdiv');//给新的div设置class，class的样式在style里设置
					var object = addAddressCon.appendChild(div);//将这个新的div添加到页面里


					var inputPro = document.createElement('input');//创建输入省的input
					inputPro.id = 'inputPro';
					//				inputPro.value='如四川';
					var addPro = div.appendChild(inputPro);

					var province = document.createElement('p');
					province.setAttribute('class', 'newp');
					province.innerHTML = '省';
					var addProP = div.appendChild(province);

					var inputCity = document.createElement('input');//创建输入市的input
					inputCity.id = 'inputCity';
					//				inputCity.value='如成都';
					var addCity = div.appendChild(inputCity);

					var city = document.createElement('p');
					city.setAttribute('class', 'newp');
					city.innerHTML = '市';
					var addCityP = div.appendChild(city);

					var inputCounty = document.createElement('input');//创建输入区县的input
					inputCounty.id = 'inputCounty';
					//				inputCounty.value='如龙泉驿';
					var addCity = div.appendChild(inputCounty);

					var county = document.createElement('p');
					county.setAttribute('class', 'newp');
					county.innerHTML = '区县';
					var addCountyP = div.appendChild(county);

					var inputSchool = document.createElement('input');//创建输入学校的input
					inputSchool.id = 'inputSchool';
					//				inputSchool.value='如四川旅游学院';
					var addSchool = div.appendChild(inputSchool);


					var school = document.createElement('p');
					school.setAttribute('class', 'newp');
					school.innerHTML = '学校';
					var addSchoolP = div.appendChild(school);

					var inputDorm = document.createElement('input');//创建输入寝室的input
					inputDorm.id = 'inputDorm';
					//				inputDorm.value='如清雅居b栋b190';
					var addSchool = div.appendChild(inputDorm);


					var dormitory = document.createElement('p');
					dormitory.setAttribute('class', 'newp');
					dormitory.innerHTML = '寝室号';
					var addDormP = div.appendChild(dormitory);


					var save = document.createElement('input');//创建保存信息的button
					save.id = 'save';
					save.type = 'button';
					save.value = '保存';
					var saveInfo = div.appendChild(save);

					var cancel = document.createElement('input');//创建取消保存信息的button
					cancel.id = 'cancel';
					cancel.type = 'button';
					cancel.value = '取消';
					var cancelInfo = div.appendChild(cancel);

					var cancelButton = document.getElementById('cancel');
					var saveButton = document.getElementById('save');
					var inputPro = document.getElementById('inputPro');
					var inputCity = document.getElementById('inputCity');
					var inputCounty = document.getElementById('inputCounty');
					var inputSchool = document.getElementById('inputSchool');
					var inputDorm = document.getElementById('inputDorm');

					saveButton.onclick = function () {
						if (inputPro.value == '' || inputCity.value == '' || inputCounty.value == '' || inputSchool.value == '' || inputDorm.value == '') {
							//判断如果新添加的div中有未填写的项目，那表示上一次添加地址还未完成，所以将添加按钮设为disabled
							//这里只是为了测试，要设置添加地址按钮的disabled属性需要判断用户添加的信息是否保存成功
							addAddress.setAttribute("disabled", "disabled");
							alert('请将信息填完整！');
						} else {
							//点击保存按钮，将用户输入的内容保存
							var addCon =  document.getElementById('addAddressCon');
							var oPro = document.getElementById('inputPro').value;
							var oCity = document.getElementById('inputCity').value;
							var oCounty = document.getElementById('inputCounty').value;
							var oSchool = document.getElementById('inputSchool').value;
							var oDormP = document.getElementById('inputDorm').value;
							var goodsAddress = oPro+"省"+oCity+"市"+oCounty+"区县"+oSchool+"学校"+oDormP+"寝室号";
							go(addCon,goodsAddress,addAddressCon);
						}
					}
//					取消按钮后，将刚刚加入页面的所有东西取消
					cancelButton.onclick = function(){
						addAddressCon.innerHTML = ""
					}
				};
				function go(addCon,goodsAddress,addAddressCon){
					$.ajax("/fengwei/address/setInfo",{
						type:"post",
						data:{
							'userId':getUrl,
							'goodsAddress':goodsAddress
						},
						success:function(){
//							成功后清除刚刚添加时的所有样式，并用<p>将刚刚的放到页面
							addAddressCon.innerHTML = "<p>"+goodsAddress+"</p>" +
									"<div id='addressConIn'>" +
									"<input type='button' name='edit' class='edit' value='编辑'/> " +
									"<input type='button' name='delete' class='delete' value='删除'/>" +
									"</div>";
//							给他addressCon的样式，除去id为这个的属性，避免重复
							addAddressCon.setAttribute("class", "addressCon");
							addAddressCon.removeAttribute("id");
//							在添加过一个地址后，需要在加上一个id为addressCon的div以便可以再次添加，否则在刷新页面之前只能添加一次
							var oDiv = document.createElement('div');//创建一个新的div
							oDiv.setAttribute('id', 'addAddressCon');
							document.body.appendChild(oDiv);
						},
						error:function(){
							alert(0);
						}
					})
				}

		</script>
	</body>
</html>
